<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            /* background-color: ; */
        }
        #bd1{
            width: 100%;
            height: 100px;
            border-bottom:10px solid rgb(3, 99, 40) ;
            font-size: 0;
            overflow: hidden;
        }
        #bd1>img{
            margin-top: 20px;
        }
        .bd1rd{
            display: inline-block;
            width: 80px;
            height: 30px;
            border: 1px solid rgb(157, 155, 155);
            box-sizing: border-box;
            font-size: 16px;
            text-align: center;
            line-height: 30px;
            margin-bottom: 56px;
            vertical-align: middle;
        }
        #bd2{
            width: 100%;
            height: 40px;
            background-color: #f6f6f6;
            border-bottom:1px solid rgb(199, 199, 199);
            border-radius: 0 0 0 10px;
        }
        #bd2>ul{
            height: 40px;
        }
        #bd2 li{
            text-align: center;
            line-height: 40px;
            padding: 0px 30px 0 30px;
            float: left;
            font-weight: 600;
            border-left: 1px solid rgb(211, 211, 211);
        }
        #bd3{
            width: 100%;
            height: 400px;
            background: url("../../img/舞台躲光_06.gif") no-repeat  0 0;
            background-size: 100% 400px;
            margin-top: 10px;
        }
        #bd4{
            width: 100%;
            height: 350px;
            margin-top: 24px;
        }
        #bd4d1{
            width: 1000px;
            height: 350px;
            float: left;
            box-sizing: border-box;
            border: 1px solid rgb(199, 199, 199)
        }
        #bd4d2{
            width: 480px;
            height: 350px;
            float: left;
            margin-left: 10px;
            box-sizing: border-box;
            border: 1px solid rgb(199, 199, 199);
            /* margin-top: 10px; */
        }
        .bd4dp{
            width: 200px;
            height: 50px;
            margin: 10px 0 10px 30px;
            font-size: 20px;
            background: url("../../img/红提示_03.gif") no-repeat  1px 9px;
            padding: 0 0 0 10px;
        }
        #bd4d1>ul{
            margin: 0 0 0 30px;
        }
        #bd4d1>ul>li{
                   margin: 10px 0 0 0; 
        }
        #bd4d1>ul>li>span{
            margin-right: 10px;
            float: right;
        }
        #bd5{
            width: 100%;
            height: 300px;
            box-sizing: border-box;
            border-color: #c6c6c6;
            border-style:solid ;
            border-width: 1px 1px 0 1px;
            border-radius: 5px 5px 0 0;
            margin-top: 10px;
            background:linear-gradient(to top,#ffffff,#e6e6e6) ;
            /* border-bottom: 1px solid #383737; */
            box-shadow: #c6c6c6 0 0 10px 0;
        }
        #bd5>div{
            width: 1450px;
            height: 220px;
            box-sizing: border-box;
            /* border: 1px solid #c6c6c6; */
            margin: 0 auto;
        }
        #bd5>p{
            margin: 10px 0 10px 20px;
            font-size: 20px;
        }
        #bd5>p>span{
            float: right;
            margin-right: 20px;
            background-color: brown;
            border-radius: 3px;
            color: #fff7f7;
            font-size: 16px;
        }
        #bd5>div>div{
            width: 200px;
            height: 200px;
            float: left;
            /* box-sizing: border-box; */
            border: 10px solid #c6c6c6;
            border-radius: 3px;
            margin: 0 0 0 88px;
        }
        #bd5>div>div:nth-child(1){
            margin-left: 0;
        }
        #bd6{
            width: 100%;
            height: 200px;
            background-color: #d6d6d6;
            /* margin-top: 10px */
            box-shadow: inset #a9a9a9 0 0 10px 0;
        }
        #bd4d2>div{
            /* border: 1px solid #4d4c4c; */
            box-sizing: border-box;
            /* margin-left: 50px; */
            width: 300px;
            margin: 0 auto;
            margin-top: 30px;

            
        }
        #bd4d21>input,#bd4d22>input{
            width: 200px;
            height: 30px;border: 0;
            border: 1px solid #c6c6c6;
            border-radius: 2px;
        }
        #bd4d23>input{
            /* width: 15px;
            height: 15px; */
            margin: 20px 0 0 50px;
            /* margin: 0 auto; */
            
        }
        #bd4d24{
            /* width: 100px; */
            width: 50px !important;
            height: 30px;
            background-color: rgb(23, 149, 71);
            text-align: center;
            line-height: 30px;
            color: #ffffff;
            margin-top: 30px !important;
            border-radius: 5px;
            cursor: pointer;
        }
        #bd4d24:hover{
            color: #5ae452;
            background-color: #955cdf;
        }
        #bd4d21>span,#bd4d22>span{
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="bd1">
            <img src="../../img/舞台躲光_02.gif">
            <div class="bd1rd" style="margin-left: 1100px;">设为首页</div>
            <div class="bd1rd">加入收藏</div>
            <div class="bd1rd">联系我们</div>
        </div> 
        <div id="bd2">
            <ul>
                <li>集团首页</li>
                <li>关于昆泰</li>
                <li>新闻中心</li>
                <li>项目展示</li>
                <li>加入我们</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div id="bd3"></div>
        <div id="bd4">
            <div id="bd4d1">
                <p class="bd4dp">新闻中心</p>
                <ul>
                    <li>公司四大地产项目亮相<span>2011-08-17</span></li>
                    <li>公司召开2011年年中工作会<span>2011-08-17</span></li>
                    <li>公司组织党员参观建党<span>2011-08-17</span></li>
                    <li>房山区长沟项目举行<span>2011-08-17</span></li>
                    <li>北京如意国际花园临时<span>2011-08-17</span></li>
                    <li>公司荣获城建集团<span>2011-08-17</span></li>
                    <li>江苏淮安如意国际<span>2011-08-17</span></li>
                </ul>
            </div>
            <div id="bd4d2">
                <p class="bd4dp">邮箱登录</p>
                <div id="bd4d21"><span>邮箱名:</span><input></div>
                <div id="bd4d22"><span>密&nbsp;&nbsp;&nbsp;&nbsp;码:</span><input></div>
                <div id="bd4d23"><input type="checkbox" id="apple" value="apple"><label>SSL安全登录</label></div>
                <div id="bd4d24">登录</div>
            </div>
        </div>
        <div id="bd5">
            <p>项目展示<span>MORE</span></p>
            <div>
                <div><img src="https://picsum.photos/200/200?random=1"></div>
                <div><img src="https://picsum.photos/200/200?random=2"></div>
                <div><img src="https://picsum.photos/200/200?random=3"></div>
                <div><img src="https://picsum.photos/200/200?random=4"></div>
                <div><img src="https://picsum.photos/200/200?random=5"></div>
            </div>
        </div>
        <div id="bd6"></div>
    </div>
</body>
</html>